<template>
  <div class="mod-info">
    <!-- <el-row> -->
    <!-- <el-col :span="6"> -->
    <div class="grid-content bg-purple-dark">
      <el-form ref="form" :model="form" :rules="dataRule" label-width="120px" class="demo-ruleForm">
        <el-form-item label="平台名称" prop="name" :rules="[ { required: true, message: '平台名称不能为空'}]">
          <el-col :span="8">
            <el-input class="ht36" v-model="form.name" maxlength="16"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="平台标题" prop="title" :rules="[ { required: true, message: '平台标题不能为空'}]">
          <el-col :span="8">
            <el-input v-model="form.title" maxlength="100"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="平台描述" prop="describe" :rules="[ { required: true, message: '平台描述不能为空'}]">
          <el-col :span="8">
            <el-input v-model="form.describe" maxlength="200"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="关键词" prop="keyword" :rules="[ { required: true, message: '关键词不能为空'}]">
          <el-col :span="8">
            <el-input v-model="form.keyword" maxlength="100"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="平台LOGO" prop="logo" :rules="[ { required: true, message: '平台LOGO不能为空'}]">
          <Imglist @updataImg='updataImg' :limit="1" :value="formLogo" :clearVisible="clearVisible" :disable="disable"></Imglist>
        </el-form-item>
        <el-form-item label="客服热线" prop="hotline" :rules="[ { required: true, message: '客服热线不能为空'}]">
          <el-col :span="8">
            <el-input v-model="form.hotline" maxlength="11"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="客服邮箱" prop="emila">
          <el-col :span="8">
            <el-input v-model="form.emila" maxlength="20"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- </el-col> -->
    <!-- </el-row> -->
  </div>
</template>

<script>
import seviceApi from '@/api/serviceApi.js'
import Imglist from './../oss/oss-uploadImg'
import { isEmail, isMobile } from '@/utils/validate'
export default {
  components: {
    Imglist
  },
  data () {
    var validateEmail = (rule, value, callback) => {
      if (!isEmail(value)) {
        callback(new Error('邮箱格式错误'))
      } else {
        callback()
      }
    }
    return {
      formLogo: [],
      clearVisible: false,
      disable: true,
      form: {
        id: '',
        name: '', // 名称
        title: '', // 标题
        describe: '', // 描述
        keyword: '', // 关键词
        logo: '', // logo
        hotline: '', // 热线
        emila: ''// 邮箱
      },
      dataRule: {
        emila: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { validator: validateEmail, trigger: 'blur' }
        ]

      }
    }
  },
  mounted () {
    this.getInfo()
  },
  methods: {
    // 上传图片
    updataImg (e) {
      this.form.logo = e
    },
    getInfo () {
      seviceApi.infoSystemInfo().then(res => {
        if (res && res.data.code == 200) {
          if (res.data.data) {
            this.form = res.data.data
            if (res.data.data.logo) {
              this.formLogo = res.data.data.logo.split(',')
            }
          }
        }
      })
    },
    // 添加修改
    onSubmit (form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.form.logo) {
            if (typeof (this.form.logo) === 'string') {
              this.form.logo = this.form.logo
            } else {
              this.form.logo = this.form.logo.join(',')
            }
          }
          seviceApi.saveSystemInfo(this.form).then(res => {
            if (res && res.data.code == 200) {
              this.$message({
                message: '保存成功',
                type: 'success'
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    }
  }
}
</script>

<style lang="">
.ht36,
.el-input--mini .el-input__inner {
  height: 36px;
  line-height: 36px;
}
.el-button--mini,
.el-button--mini.is-round {
  padding: 10px 40px;
}
</style>
